<template>
  <div class="statistics-table">
    <ul class="table-header">
      <li
        v-for="v in tableHeader"
        :key="v.key"
        :style="{ width: v.width, flex: v.width ? 'unset' : '1' }"
      >
        {{ v.title }}
      </li>
    </ul>
    <ul class="table-body">
      <li v-for="v in tableData">
        <div
          v-for="(vv, i) in tableHeader"
          :key="vv.key"
          class="body-li-item"
          :style="{ width: vv.width, flex: vv.width ? 'unset' : '1' }"
        >
          <div
            v-if="vv.key.includes('column-')"
            class="cicle-icon"
            :style="{ backgroundColor: setTxtByParam({ index: i, data: v }) }"
          ></div>
          <div v-else>{{ setTxtByParam({ index: i, data: v }) }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, h, computed } from "vue";
const props = defineProps({
  table: {
    type: Object,
    default: () => {},
  },
  searchModel: {
    type: Object,
    default: () => {},
  },
});
const tableData = computed(() => {
  return props.table.map((v) => {
    v.dutyInfoList.forEach((vv) => {
      v["column-" + Number(vv.dutyDate.slice(-2))] = vv.markColor;
    });
    v.dutyInfoCountList.forEach((vv) => {
      if (vv.dutyShift == "早班") v["zaoban"] = vv.days;
      else if (vv.dutyShift == "晚班") v["wanban"] = vv.days;
      else if (vv.dutyShift == "全天") v["quantian"] = vv.days;
      else if (vv.dutyShift == "休息") v["xiuxi"] = vv.days;
    });
    return v;
  });
});
const tableHeader = ref([
  { title: "班组名称", key: "teamGroup", width: "130px" },
  { title: "收费员", key: "cashier", width: "100px" },
]);
const tableColumns = ref(0);
function daysInMonth(year, month) {
  month = month - 1;
  var date = new Date(year, month, 1);

  // 设置日期对象为下一个月的第一天，然后减去一天，得到当前月的最后一天
  date.setMonth(date.getMonth() + 1);
  date.setDate(date.getDate() - 1);

  // 返回当前月的总天数
  return date.getDate();
}

const getData = () => {
  var days = daysInMonth(props.searchModel.year, props.searchModel.month);
  tableColumns.value = days;
  console.log("  tableColumns.value ===>", tableColumns.value);

  for (let i = 1; i <= tableColumns.value; i++) {
    tableHeader.value.push({
      title: `${i}`,
      key: `column-${i}`,
    });
  }
  // tableHeader.value.push({ title: `早班`, key: `zaoban` });
  // tableHeader.value.push({ title: `晚班`, key: `wanban` });
  // tableHeader.value.push({ title: `全天`, key: `quantian` });
  // tableHeader.value.push({ title: `休息`, key: `xiuxi` });
};
getData();

const setTxtByParam = (props) => {
  let headerItem = tableHeader.value[props.index];
  return props.data[headerItem.key] ?? "";
};
</script>

<style lang="less" scoped>
.statistics-table {
  margin-top: 20px;
  width: 100%;
  height: 80%;
  font-size: 14px;
  min-width: 1200px;

  .table-header {
    background-color: #f4f4f4;
    display: inline-flex;
    width: 100%;
    height: 55px;

    li {
      border: 1px solid #d1d1d1;
      flex: 1;
      border-right: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      &:last-of-type {
        border-right: 1px solid #d1d1d1;
      }
    }
  }

  .table-body {
    display: flex;
    width: 100%;
    flex-direction: column;

    .cicle-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }

    li {
      width: 100%;
      height: 46px;
      display: flex;
      border-bottom: 1px solid #d1d1d1;
      position: relative;

      .body-li-item {
        display: inline-flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #d1d1d1;

        &:last-of-type {
          border-right: 1px solid #d1d1d1;
        }
      }
    }
  }
}
</style>